<template>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="地址">
      <el-input v-model="formInline.address" placeholder="请输入地址" clearable />
    </el-form-item>
    <el-form-item label="最小年龄">
      <el-input v-model="formInline.minAge" placeholder="请输入最小年龄" clearable />
    </el-form-item>
    <el-form-item label="最大年龄">
      <el-input v-model="formInline.maxAge" placeholder="请输入最大年龄" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  
  <el-table :data="tableData" style="width: 100%">
     <el-table-column prop="username" label="用户名" width="140" />
            <el-table-column prop="email" label="邮政" width="120" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="createdAt" label="创建时间" />
            <el-table-column prop="updatedAt" label="修改时间" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          Detail
        </el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination background layout="prev, pager, next" :total="total":page-size="10"@current-change='page' />

</template>

<script lang="ts" setup>
import {ref,onMounted, reactive} from 'vue'
import axios from 'axios'

const tableData = ref([])
const total=ref(0)
const address=ref('')
const minAge=ref(null)
const maxAge=ref(null)
const formInline = reactive({
  address: '',
  minAge: null,
  maxAge: null,
})

const onSubmit = () => {
  address.value=formInline.address
  minAge.value=formInline.minAge
  maxAge.value=formInline.maxAge
  loadData()
}
const reset = () => {
  formInline.address=''
  formInline.minAge=null
  formInline.maxAge=null
}

const loadData=(pageNum:number=1)=>{
  axios.get('http://113.45.160.83:8080/find',{
    params:{pageNum,
      address:address.value,
      minAge:minAge.value,
      maxAge:maxAge.value
    }}).then(function(resp){
    tableData.value = resp.data.records
    total.value=resp.data.total
  })
}
const page=(pageNum:number)=>{
  loadData(pageNum);
}

onMounted(() => {
    loadData()
    })
</script>


